// ------------------------------- 查询所有学员，循环展示 ------------------------------
function renderStudent() {
  axios.get('/student/list').then(({ data: res }) => {
    let { code, data } = res;
    if (code === 0) {
      let trs = '';
      data.forEach(item => {
        trs += `
        <tr>
          <th scope="row">${item.id}</th>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.sex}</td>
          <td>${item.group}</td>
          <td>${item.phone}</td>
          <td>${item.salary}</td>
          <td>${item.truesalary}</td>
          <td>${item.province} ${item.city} ${item.county}</td>
          <td>
          <button data-id="${item.id}" data-province="${item.province}" type="button" class="btn btn-primary btn-sm edit">修改</button>
            <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm del">删除</button>
          </td>
        </tr>
        `;
      });
      $('tbody').html(trs);
    }
  });
}
renderStudent();


// -------------------------------------- 删除学员 ------------------------------------------
$('tbody').on('click', '.del', function () {
  if (!confirm('你确定要删除吗？')) return;
  let id = $(this).data('id');
  axios.delete('/student/delete', { params: { id } }).then(({ data: res }) => {
    if (res.code === 0) {
      toastr.success(res.message); // 提示
      renderStudent(); // 更新页面数据
    }
  })
})

// --------------------------------------- 省市县联动 --------------------------------------

// 封装循环遍历数据的函数
function renderGeo(res, cnName, enName) {
  let str = `<option value="" selected>--${cnName}--</option>`;
  res.forEach(item => {
    str += `<option value="${item}">${item}</option>`;
  });
  $(`select[name=${enName}]`).html(str);
}

// 页面加载完毕，马上获取全部的省
axios.get('/geo/province').then(({ data: res }) => {
  renderGeo(res, '省', 'province')
});

// 省切换的时候，获取对应的市
$('select[name=province]').on('change', function () {
  // 重置县
  $('select[name=county]').html('<option value="" selected>--县--</option>');

  // 获取到当前选择的省
  let pname = $(this).val(); // 对于下拉框来说，$('select').val() 找的并不是 select标签的value属性，找的是 option是value属性

  // 判断，如果选择了空的省，重置后面的市和县
  if (pname === '') {
    return $('select[name=city]').html('<option value="" selected>--市--</option>'); // 左右结构，右侧先执行
  }

  // 获取对应的市，并展示到对应的下拉框中
  axios.get('/geo/city', { params: { pname } }).then(({ data: res }) => {
    renderGeo(res, '市', 'city');
  });
})


// 市切换的时候，获取对应的县
$('select[name=city]').on('change', function () {
  // 获取到当前选择的省
  let pname = $(this).parent().prev().children().eq(0).val();
  let cname = $(this).val(); // 对于下拉框来说，$('select').val() 找的并不是 select标签的value属性，找的是 option是value属性

  // 判断，如果市是空值，重置后面的县
  if (cname === '') return $('select[name=county]').html('<option value="" selected>--县--</option>');

  // 获取对应的市，并展示到对应的下拉框中
  axios.get('/geo/county', { params: { pname, cname } }).then(({ data: res }) => {
    renderGeo(res, '县', 'county')
  });
})

// ---------------------------------------- 添加学员 ----------------------------------------
// 1. 研究一下，弹框是怎么回事。https://v5.bootcss.com/docs/components/modal/
// 2. 省市县联动效果
// 3. 表单验证
function test() {
  return {
    fields: {
      name: { // 这里 name 是 input 的name属性值，表示对这个输入框进行验证
        validators: {
          notEmpty: {   //不能为空
            message: '姓名不能为空.'
          },
          stringLength: {   //检测长度
            min: 2,
            max: 10,
            message: '姓名需要2~10个字符'
          }
        }
      },
      age: {
        validators: {
          notEmpty: {
            message: '年龄不能为空'
          },
          greaterThan: {
            value: 18,
            message: '年龄必须大于等于18'
          },
          lessThan: {
            value: 50,
            message: '年龄必须小于等于50'
          }
        }
      },
      group: {
        validators: {
          notEmpty: {
            message: '组号不能为空'
          },
          greaterThan: {
            value: 1,
            message: '组号必须大于等于1'
          },
          lessThan: {
            value: 20,
            message: '组号必须小于等于20'
          }
        }
      },
      sex: {
        validators: {
          notEmpty: {
            message: '性别不能为空'
          },
          regexp: {
            regexp: /^男|女$/i,
            message: '性别只能是男或者女'
          }
        }
      },
      phone: {
        validators: {
          notEmpty: {
            message: '手机号不能为空'
          },
          regexp: {
            regexp: /^1\d{10}$/i,
            message: '手机号格式不正确'
          }
        }
      },
      salary: {
        validators: {
          notEmpty: {
            message: '期望薪资不能为空'
          },
          greaterThan: {
            value: 100,
            message: '期望薪资必须大于等于100'
          },
          lessThan: {
            value: 99999,
            message: '期望薪资必须小于等于99999'
          }
        }
      },
      truesalary: {
        validators: {
          notEmpty: {
            message: '实际薪资不能为空'
          },
          greaterThan: {
            value: 100,
            message: '实际薪资必须大于等于100'
          },
          lessThan: {
            value: 99999,
            message: '实际薪资必须小于等于99999'
          }
        }
      },
      province: {
        validators: {
          notEmpty: {
            message: '省不能为空'
          },
          stringLength: {   // 检测长度
            min: 1,
            max: 20,
            message: '省不能为空'
          }
        }
      },
      city: {
        validators: {
          notEmpty: {
            message: '市不能为空'
          },
          stringLength: {   //检测长度
            min: 1,
            max: 20,
            message: '市不能为空'
          }
        }
      },
      county: {
        validators: {
          notEmpty: {
            message: '县不能为空'
          },
          stringLength: {   //检测长度
            min: 1,
            max: 20,
            message: '县不能为空'
          }
        }
      }
    }
  }
}

// 4. 表单提交，完成添加
$('#addModal form').bootstrapValidator(test()).on('success.form.bv', function (e) {
  e.preventDefault();
  // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
  // console.log(123);
  let data = $(this).serialize();
  axios.post('/student/add', data).then(({ data: res }) => {
    if (res.code === 0) {
      toastr.success(res.message); // 提示
      renderStudent(); // 更新页面数据
      $('#addModal').modal('hide'); // 关闭bootstrap的模态框   https://v4.bootcss.com/docs/components/modal/#modalshow
    }
  })
});


// --------------------修改学员-------------------------
//点击  修改   按钮
$('tbody').on('click','.edit',function(){

  let id = $(this).data('id');
  //先做数据回填(所有的修改操作,输入框不能是空的,必须把数据的默认值做好)
  axios.get('/student/one', { params: { id } }).then(({ data: res }) => {
    let { code, data } = res;
    if (code === 0) {
      //console.log(data);
      // 设置每个表单项的默认值
      $('#updateModal input[name=id]').val(data.id);
      $('#updateModal input[name=name]').val(data.name);
      $('#updateModal input[name=age]').val(data.age);
      $('#updateModal input[name=phone]').val(data.phone);
      $('#updateModal input[name=salary]').val(data.salary);
      $('#updateModal input[name=truesalary]').val(data.truesalary);

      // $('input[属性=值][属性=值]')  属性选择器，可以使用多个属性；多个属性之间是并且关系
      $(`#updateModal input[name=sex][value=${data.sex}]`).prop('checked', true); // prop方法作用是设置input勾选

      // 对于下拉框来说，设置value，即可选中该项
      $('#updateModal select[name=group]').val(data.group);
      $('#updateModal select[name=province]').val(data.province);
      $('#updateModal select[name=city]').append(`<option value="${data.city}" selected>${data.city}</option>`);
      $('#updateModal select[name=county]').append(`<option value="${data.county}" selected>${data.county}</option>`);
    }
  });
  $('#updateModal').modal('show'); // 让模态框显示
})


//表单提交,完成修改
$('#updataModal form').bootstrapValidator(test()).on('success.form.bv', function (e) {
  e.preventDefault();
  // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
  let data = $(this).serialize();
  axios.put('/student/update', data).then(({ data: res }) => {
    if (res.code === 0) {
      toastr.success(res.message); // 提示
      renderStudent(); // 更新页面数据
      $('#updateModal').modal('hide'); // 关闭弹出层
    }
  })
});